<template>
<div v-if="contentLoaded">
    <div v-if="lists.length">
        <div id="more_nav">
            <div v-for="(list, i) in lists" :key="i" class="nav"
                :class="{active: activeNav == i}"
                @click="activeNav = i">
            <p class="p34">{{getDate(list.starttime)}}</p>
            <p class="p30">{{getTime(list.starttime)}}</p>
            </div>
        </div>
        <div id="time_container" class="p28 black">
            下场次预告：{{getDate(activeList.starttime)}} {{getTime(activeList.starttime)}}
        </div>
        <div>
            <Item v-for="item in activeList.list" :key="item.pre_goods_id"
                :item="item"></Item>
        </div>
    </div>
    <div v-else class="middle-tip">
        暂无预告商品
    </div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { Indicator} from 'mint-ui'
import Item from '@/components/Item'
export default {
    name: 'more',
    async created(){
        Indicator.open()
        await this.$store.dispatch('goods/getPreviewLimitedGoods')
        this.contentLoaded = true
        Indicator.close()
    },
    data(){
        return{
            activeNav: 0,
            contentLoaded: false
        }
    },
    computed:{
        ...mapGetters({
            lists: 'goods/previewLimitedGoods'
        }),
        activeList(){
            return this.lists[this.activeNav]
        }
    },
    methods:{
        add0(num) {
            return num < 10 ? `0${num}` : num
        },
        getDate(timestamp) {
            const t = timestamp*1000
            const tm = new Date(t).getMonth() + 1
            const td = new Date(t).getDate()
            const c = Date.now()
            const cm = new Date(c).getMonth() + 1
            const cd = new Date(c).getDate()
            if(tm !== cm) return `${tm}月${td}日`
            switch(td - cd) {
                case 0: 
                    return '今天'
                case 1:
                    return '明天'
                case 2:
                    return '后天'
                default:
                    return `${tm}月${td}日`
            }
        },
        getTime(timestamp) {
            const t = timestamp*1000
            const h = new Date(t).getHours()
            const m = new Date(t).getMinutes()
            return `${h}:${this.add0(m)}`
        }
    },
    components: { Item }
}
</script>
<style lang="less" scoped>
#more_nav{
    display: flex;
    .nav{
        background: #111;
        color: #fff;
        flex-basis: 0;
        flex-grow: 1;
        text-align: center;
        position: relative;
        padding: .1rem;
        &.active{
            background: #fb4a4a;
            &:after{
                content: '';
                border: .3rem solid transparent;
                border-top-color: #fb4a4a;
                position: absolute;
                transform: translate3d(-50%, 0, 0);
            }
        }
    }
}
#time_container{
    padding: 0 .3rem;
    background: #fff;
    height: .9rem;
	line-height: 0.9rem;
	border-bottom: 1.5px solid #ddd;
}
</style>
